<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>电气选型工具</title>
    <style>
        :root {
            --primary-color: #3498db;
            --secondary-color: #2ecc71;
            --tertiary-color: #f39c12; /* 电源 */
            --quaternary-color: #9b59b6; /* 弱电 */
            --light-gray: #f4f7f9;
            --medium-gray: #e0e0e0;
            --dark-gray: #34495e;
            --text-color: #2c3e50;
            --white: #ffffff;
            --danger-color: #e74c3c;
            --border-radius: 8px;
        }

        body {
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
            background-color: var(--light-gray);
            color: var(--text-color);
            line-height: 1.6;
            margin: 0;
            padding: 20px;
        }

        .container {
            max-width: 900px;
            margin: 20px auto;
            background: var(--white);
            padding: 20px 30px;
            border-radius: var(--border-radius);
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
        }

        .layout-container {
            display: flex;
            flex-wrap: wrap;
            gap: 30px;
            align-items: flex-start;
        }

        .main-content {
            flex: 2;
            min-width: 400px;
        }

        .sidebar {
            flex: 1;
            position: sticky;
            top: 20px;
        }
        h1 {
            text-align: center;
            color: var(--dark-gray);
            margin-bottom: 30px;
        }

        .section {
            background-color: #fff;
            padding: 20px;
            margin-bottom: 25px;
            border-radius: var(--border-radius);
            border: 1px solid var(--medium-gray);
        }

        .section-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            font-size: 1.3em;
            font-weight: 600;
            color: var(--dark-gray);
            margin-bottom: 15px;
            padding-bottom: 10px;
            border-bottom: 1px solid #ecf0f1;
        }

        .config-block {
            background-color: var(--light-gray);
            padding: 15px;
            margin-top: 15px;
            border-radius: 6px;
            border: 1px solid #dde4e9;
            display: flex;
            align-items: center;
            gap: 15px;
        }
        
        .config-block .config-options {
            display: flex;
            flex-wrap: wrap; /* Allow options to wrap to the next line */
            gap: 15px; /* Spacing between options */
            align-items: center; /* Vertically align items */
            flex: 1; /* Allow the container to grow */
        }

        .config-option-item {
            display: flex;
            align-items: center;
            gap: 5px; /* Space between label and select */
        }

        .summary-table {
            width: 100%;
            border-collapse: collapse;
            font-size: 0.9em;
        }
        
        .config-block label, .config-block select {
            font-size: 0.9em; /* Reduce font size for options */
            padding-top: 6px; /* Adjust padding for smaller font */
            padding-bottom: 6px;
        }
        
        .summary-table th, .summary-table td {
            text-align: left;
            padding: 8px;
            border-bottom: 1px solid var(--medium-gray);
        }

        .summary-table th {
            font-weight: 600;
        }

        .summary-table .total-row td {
            font-weight: bold;
            border-top: 2px solid var(--dark-gray);
            border-bottom: none;
        }

        .config-block-title {
            font-size: 1.1em;
            flex-shrink: 0; /* Prevent the title from shrinking */
            margin-right: 15px; /* Add some space between title and options */
        }

        .config-block-fq strong {
            color: var(--primary-color);            
        }

        .config-block-dr strong {
            font-size: 1.1em; 
            color: var(--secondary-color);
        }

        .config-block-ps strong {
            color: var(--tertiary-color);
        }

        .config-block-wc strong {
            color: var(--quaternary-color);
        }

        .results {
            background-color: var(--light-gray);
            padding: 20px;
            border-radius: var(--border-radius);
            min-height: 100px;
            border: 1px dashed var(--medium-gray);
        }
        
        .result-item {
            margin: 0 0 10px 0;
            padding: 10px;
            background: var(--white);
            border-radius: 4px;
        }

        .result-item-fq {
            border-left: 4px solid var(--primary-color);
        }

        .result-item-dr {
            border-left: 4px solid var(--secondary-color);
            border-radius: 4px;
        }

        .result-item-ps {
            border-left: 4px solid var(--tertiary-color);
        }

        .result-item-wc {
            border-left: 4px solid var(--quaternary-color);
        }

        hr.separator {
            border: none;
            height: 2px;
            margin: 15px 0;
        }

        hr.separator-fq {
            background-color: var(--primary-color);
        }

        hr.separator-dr {
            background-color: var(--secondary-color);
        }

        hr.separator-ps {
            background-color: var(--tertiary-color);
        }

        hr.separator-wc {
            background-color: var(--quaternary-color);
        }
        
        .summary {
            margin-top: 10px;
        }

        .summary .result-item {
            font-weight: bold;
        }
        button {
            padding: 8px 15px;
            cursor: pointer;
            border: none;
            border-radius: 5px;
            font-size: 0.9em;
            font-weight: bold;
            transition: background-color 0.2s ease, transform 0.1s ease;
        }

        button:hover {
            transform: translateY(-1px);
        }

        #add-fq { background-color: var(--primary-color); color: var(--white); }
        #add-dr { background-color: var(--secondary-color); color: var(--white); }
        #add-ps { background-color: var(--tertiary-color); color: var(--white); }
        #add-wc { background-color: var(--quaternary-color); color: var(--white); }

        #add-fq:hover {
            background-color: #2980b9; /* Darker blue */
        }
        #add-dr:hover {
            background-color: #27ae60; /* Darker green */
        }
        #add-ps:hover {
            background-color: #e67e22; /* Darker orange */
        }
        #add-wc:hover {
            background-color: #8e44ad; /* Darker purple */
        }

        button[onclick*="removeConfig"] {
            background-color: var(--danger-color);
            color: var(--white);
            margin-left: auto; /* Pushes the delete button to the far right */
        }

        button[onclick*="removeConfig"]:hover {
            background-color: #c0392b;
        }

        button:disabled {
            background-color: #bdc3c7;
            cursor: not-allowed;
            transform: none;
        }

        select {
            padding: 8px 12px;
            border: 1px solid #ccc;
            border-radius: 5px;
            background-color: var(--white);
            font-size: 1em;
        }

        label {
            font-weight: 500;
            color: #555;
        }

        /* Responsive adjustments */
        @media (max-width: 768px) {
            .config-block {
                flex-direction: column;
                align-items: stretch;
                gap: 10px;
            }
            button[onclick*="removeConfig"] {
                margin-left: 0;
                margin-top: 10px;
            }
            .main-content, .sidebar {
                flex-basis: 100%;
            }
            .sidebar {
                position: static; /* On small screens, sidebar should scroll normally */
            }
        }
    </style>
</head>
<body>

<div class="container">
    <h1>电气选型工具</h1>

    <div class="layout-container">
        <div class="main-content">
            <!-- 风机回路配置区域 -->
            <div class="section">
                <div class="section-header">
                    <span>风机回路 (已选 <span id="fq-count">0</span>/4)</span>
                    <button id="add-fq">添加+</button>
                </div>
                <div id="fq-configs"></div>
            </div>

            <!-- 电热回路配置区域 -->
            <div class="section">
                <div class="section-header">
                    <span>电热回路 (已选 <span id="dr-count">0</span>/2)</span>
                    <button id="add-dr">添加+</button>
                </div>
                <div id="dr-configs"></div>
            </div>

            <!-- 电源回路配置区域 -->
            <div class="section">
                <div class="section-header">
                    <span>电源回路 (已选 <span id="ps-count">0</span>/6)</span>
                    <button id="add-ps">添加+</button>
                </div>
                <div id="ps-configs"></div>
            </div>

            <!-- 弱电回路配置区域 -->
            <div class="section">
                <div class="section-header">
                    <span>弱电回路 (已选 <span id="wc-count">0</span>/1)</span>
                    <button id="add-wc">添加+</button>
                </div>
                <div id="wc-configs"></div>
            </div>
        </div>

        <div class="sidebar">
            <!-- 结果显示区域 -->
            <div class="section">
                <div class="section-header">已选配置信息</div>
                <div id="results" class="results"></div>
            </div>
        </div>
    </div>
</div>

<script>
    // 从PDF中提取的数据
    const FQ_DATA = {
        voltages: { "380V": "D380", "220V": "D220" },
        controlTypes: { "变频": "BP", "工频": "D", "工/变": "C" },
        inverterBrands: { "ABB": "A", "易驱": "Y", "西门子": "X", "无": "O" },
        powers: { "0.37KW": "R37", "0.55KW": "R55", "0.75KW": "R75", "1.1KW": "1R1", "1.5KW": "1R5", "2.2KW": "2R2", "3KW": "3R", "4KW": "4R", "5.5KW": "5R5", "7.5KW": "7R5", "11KW": "11R", "15KW": "15R", "18.5KW": "18R5", "22KW": "22R", "30KW": "30R", "45KW": "45R" },
        brands: { "正泰": "ZT", "施耐德": "SN" }
    };

    const DR_DATA = {
        controlMethods: { "可控硅": "DO", "比例(1)": "D1", "比例(1:01)": "D11", "比例(1:02)": "D12", "比例(1:01:01)": "D111", "比例(1:02:04)": "D124" },
        currents: { "10A": "A10", "16A": "A16", "25A": "A25", "32A": "A32", "40A": "A40", "50A": "A50", "63A": "A63", "80A": "A80", "100A": "A100", "125A": "A125" },
        brands: { "正泰": "ZT", "施耐德": "SN" }
    };

    // 占位数据 - 您可以根据实际PDF修改
    const PS_DATA = {
        currents: { "16A": "C16", "25A": "C25", "32A": "C32", "40A": "C40", "63A": "C63", "100A": "C100" },
        brands: { "正泰": "ZT", "施耐德": "SN" }
    };

    const WC_DATA = {
        signalTypes: ["DI (8点)", "DO (8点)", "AI (4通道)", "AO (2通道)", "RS485"],
        brands: ["西门子", "杂牌"]
    };

    // 状态管理
    let fqConfigs = [];
    let drConfigs = [];
    let psConfigs = [];
    let wcConfigs = [];

    // DOM 元素
    const addFqBtn = document.getElementById('add-fq');
    const addDrBtn = document.getElementById('add-dr');
    const addPsBtn = document.getElementById('add-ps');
    const addWcBtn = document.getElementById('add-wc');

    const fqContainer = document.getElementById('fq-configs');
    const drContainer = document.getElementById('dr-configs');
    const psContainer = document.getElementById('ps-configs');
    const wcContainer = document.getElementById('wc-configs');

    const resultsDiv = document.getElementById('results');
    const fqCountSpan = document.getElementById('fq-count');
    const drCountSpan = document.getElementById('dr-count');
    const psCountSpan = document.getElementById('ps-count');
    const wcCountSpan = document.getElementById('wc-count');

    // 事件监听
    addFqBtn.addEventListener('click', () => addConfig('fq'));
    addDrBtn.addEventListener('click', () => addConfig('dr'));
    addPsBtn.addEventListener('click', () => addConfig('ps'));
    addWcBtn.addEventListener('click', () => addConfig('wc'));
    
    // 动态创建下拉菜单
    function createSelect(options) {
        const select = document.createElement('select');        const opts = Array.isArray(options) ? options : Object.keys(options);
        options.forEach(opt => {
            const option = document.createElement('option');
            option.value = opt;
            option.textContent = opt;
            select.appendChild(option);
        });
        return select;
    }

    // 添加配置块
    function addConfig(type) {
        let configs, container, max, typeName;
        if (type === 'fq') {
            [configs, container, max, typeName] = [fqConfigs, fqContainer, 4, '风机'];
        } else if (type === 'dr') {
            [configs, container, max, typeName] = [drConfigs, drContainer, 2, '电热'];
        } else if (type === 'ps') {
            [configs, container, max, typeName] = [psConfigs, psContainer, 6, '电源'];
        } else if (type === 'wc') {
            [configs, container, max, typeName] = [wcConfigs, wcContainer, 1, '弱电'];
        } else {
            return;
        }

        if (configs.length >= max) {
            alert(`最多只能添加 ${max} 个${typeName}回路。`);
            return;
        }

        const id = configs.length;
        const configBlock = document.createElement('div');
        configBlock.classList.add('config-block');
        configBlock.classList.add(`config-block-${type}`);
        configBlock.dataset.id = id;
        configBlock.dataset.type = type;

        let innerHTML = '';
        if (type === 'fq') {
            innerHTML = `
                <strong class="config-block-title config-block-fq">#${id + 1}</strong>
                <div class="config-options">
                    <div class="config-option-item">
                        <label>电压:</label> ${createSelect(Object.keys(FQ_DATA.voltages)).outerHTML}
                    </div>
                    <div class="config-option-item">
                        <label>控制类型:</label> ${createSelect(Object.keys(FQ_DATA.controlTypes)).outerHTML}
                    </div>
                    <div class="config-option-item">
                        <label>变频器:</label> ${createSelect(Object.keys(FQ_DATA.inverterBrands)).outerHTML}
                    </div>
                    <div class="config-option-item">
                        <label>功率:</label> ${createSelect(Object.keys(FQ_DATA.powers)).outerHTML}
                    </div>
                    <div class="config-option-item">
                        <label>品牌:</label> ${createSelect(Object.keys(FQ_DATA.brands)).outerHTML}
                    </div>
                </div>
                <button onclick="removeConfig('${type}', ${id})">删除</button>
            `;
        } else if (type === 'dr') {
            innerHTML = `
                <strong class="config-block-title config-block-dr">#${id + 1}</strong>
                <div class="config-options">
                    <div class="config-option-item"><label>控制方式:</label> ${createSelect(Object.keys(DR_DATA.controlMethods)).outerHTML}</div>
                    <div class="config-option-item"><label>电流:</label> ${createSelect(Object.keys(DR_DATA.currents)).outerHTML}</div>
                    <div class="config-option-item"><label>品牌:</label> ${createSelect(Object.keys(DR_DATA.brands)).outerHTML}</div>
                </div>
                <button onclick="removeConfig('${type}', ${id})">删除</button>
            `;
        } else if (type === 'ps') {
            innerHTML = `
                <strong class="config-block-title config-block-ps">#${id + 1}</strong>
                <div class="config-options">
                    <div class="config-option-item"><label>电流:</label> ${createSelect(Object.keys(PS_DATA.currents)).outerHTML}</div>
                    <div class="config-option-item"><label>品牌:</label> ${createSelect(Object.keys(PS_DATA.brands)).outerHTML}</div>
                </div>
                <button onclick="removeConfig('${type}', ${id})">删除</button>
            `;
        } else if (type === 'wc') {
             innerHTML = `
                <strong class="config-block-title config-block-wc">#${id + 1}</strong>
                <div class="config-options">
                    <div class="config-option-item"><label>信号类型:</label> ${createSelect(WC_DATA.signalTypes).outerHTML}</div>
                    <div class="config-option-item"><label>品牌:</label> ${createSelect(WC_DATA.brands).outerHTML}</div>
                </div>
                <button onclick="removeConfig('${type}', ${id})">删除</button>
            `;
        }
        configBlock.innerHTML = innerHTML;
        
        container.appendChild(configBlock);
        configs.push({}); // 占位
        updateUI();

        // 为新生成的选择框添加事件监听
        configBlock.querySelectorAll('select').forEach(select => {
            select.addEventListener('change', updateUI);
        });
    }
    
    // 删除配置块
    window.removeConfig = function(type, id) {
        let container;
        if (type === 'fq') container = fqContainer;
        else if (type === 'dr') container = drContainer;
        else if (type === 'ps') container = psContainer;
        else if (type === 'wc') container = wcContainer;
        else return;

        const blockToRemove = container.querySelector(`[data-id='${id}']`);
        if (blockToRemove) {
            container.removeChild(blockToRemove);
            // 这是一个简化的删除逻辑，实际项目中需要更稳健地处理ID和数组
            // 为了演示，我们直接清空并重新渲染
            updateUI(); 
        }
    }

    // 更新UI和结果
    function updateUI() {
        let totalPower = 0;
        let totalCurrent = 0;
        let totalPsCurrent = 0;

        fqConfigs = [];
        document.querySelectorAll('#fq-configs .config-block').forEach((block, index) => {
            const selects = block.querySelectorAll('select');
            const controlTypeSelect = selects[1];
            const inverterSelect = selects[2];

            // 联动逻辑：如果控制类型是“工频”，则变频器为“无”
            if (controlTypeSelect.value === '工频') {
                inverterSelect.value = '无';
                inverterSelect.disabled = true;
            } else {
                inverterSelect.disabled = false;
            }
            
            const config = {
                id: index + 1,
                voltage: selects[0].value,
                controlType: controlTypeSelect.value,
                inverter: inverterSelect.value,
                power: selects[3].value,
                brand: selects[4].value
            };
            fqConfigs.push(config);

            // 累加功率
            const powerValue = parseFloat(config.power.replace('KW', ''));
            if (!isNaN(powerValue)) totalPower += powerValue;
        });

        drConfigs = [];
        document.querySelectorAll('#dr-configs .config-block').forEach((block, index) => {
            const selects = block.querySelectorAll('select');
            drConfigs.push({
                id: index + 1,
                controlMethod: selects[0].value,
                current: selects[1].value,
                brand: selects[2].value
            });

            // 累加电流
            const currentValue = parseInt(selects[1].value.replace('A', ''));
            if (!isNaN(currentValue)) totalCurrent += currentValue;
        });

        psConfigs = [];
        document.querySelectorAll('#ps-configs .config-block').forEach((block, index) => {
            const selects = block.querySelectorAll('select');
            const config = {
                id: index + 1,
                current: selects[0].value,
                brand: selects[1].value
            };
            psConfigs.push(config);

            // 累加电源电流
            const currentValue = parseInt(config.current.replace('A', ''));
            if (!isNaN(currentValue)) totalPsCurrent += currentValue;
        });

        wcConfigs = [];
        document.querySelectorAll('#wc-configs .config-block').forEach((block, index) => {
            const selects = block.querySelectorAll('select');
            wcConfigs.push({
                id: index + 1,
                signalType: selects[0].value,
                brand: selects[1].value
            });
        });

        // 更新计数器
        fqCountSpan.textContent = fqConfigs.length;
        drCountSpan.textContent = drConfigs.length;
        psCountSpan.textContent = psConfigs.length;
        wcCountSpan.textContent = wcConfigs.length;
        addFqBtn.disabled = fqConfigs.length >= 4;
        addDrBtn.disabled = drConfigs.length >= 2;
        addPsBtn.disabled = psConfigs.length >= 6;
        addWcBtn.disabled = wcConfigs.length >= 1;

        // 更新结果显示
        let resultsHTML = '<table class="summary-table"><thead><tr><th>回路</th><th>代码</th><th>值</th></tr></thead><tbody>';
        
        fqConfigs.forEach(c => {
            const powerCode = FQ_DATA.powers[c.power] || '';
            resultsHTML += `<tr><td>风机 #${c.id}</td><td>${powerCode}</td><td>${c.power}</td></tr>`;
        });

        drConfigs.forEach(c => {
            const currentCode = DR_DATA.currents[c.current] || '';
            resultsHTML += `<tr><td>电热 #${c.id}</td><td>${currentCode}</td><td>${c.current}</td></tr>`;
        });

        psConfigs.forEach(c => {
            const currentCode = PS_DATA.currents[c.current] || '';
            resultsHTML += `<tr><td>电源 #${c.id}</td><td>${currentCode}</td><td>${c.current}</td></tr>`;
        });

        resultsHTML += '</tbody>';

        // 添加总计行
        let totalsHTML = '';
        if (fqConfigs.length > 0) {
            totalsHTML += `<tr class="total-row"><td colspan="2">风机总功率</td><td>${totalPower.toFixed(2)} KW</td></tr>`;
        }
        if (drConfigs.length > 0) {
            totalsHTML += `<tr class="total-row"><td colspan="2">电热总电流</td><td>${totalCurrent} A</td></tr>`;
        }
        if (psConfigs.length > 0) {
            totalsHTML += `<tr class="total-row"><td colspan="2">电源总电流</td><td>${totalPsCurrent} A</td></tr>`;
        }
        if (wcConfigs.length > 0) {
            totalsHTML += `<tr class="total-row"><td colspan="2">弱电信号</td><td>${wcConfigs[0].signalType}</td></tr>`;
        }
        
        resultsHTML += `<tfoot>${totalsHTML}</tfoot></table>`;
        resultsDiv.innerHTML = resultsHTML;
    }
    
    // 初始化
    updateUI();
</script>

</body>
</html>
